import React from 'react';

import {NavLink,withRouter} from 'react-router-dom';

import '../assets/css/MiniPlayView.css'

class MiniPlayView extends React.Component{
    constructor(){
        super();
        // console.log(this.$store.getState().playSongInfo);
        // 定义一个默认的
        this.state={
            songInfo:this.$store.getState().playSongInfo,
            nowPlayTime:'00:00',
            playTimer:null,
            // 歌词
            lyric:'',
            // 当前播放的状态
            playState:false

        }
    }
    // 获取音乐的播放信息
    getMusicPlayInfo(){
        var audio = this.$('#playTag')[0];
        // 获取进度条
        var $p_bar = this.$('.p_bar');
        var $c_bar = this.$('.c_bar');
        // 获取进度条的总宽度
        var bar_width = $p_bar.width()
        clearInterval(this.state.playTimer);
        // 播放进度条定时器
        this.state.playTimer = setInterval(()=>{
            var nowPlayTime = audio.currentTime;
            // 时分秒
            var s = nowPlayTime%60;
            var m = nowPlayTime/60;

            var {time:s,stime:ss} = this.$formatTime(s);
            var {time:m,stime:sm} = this.$formatTime(m);
            // console.log(s,m);
            this.setState({
                nowPlayTime:sm+':'+ss
            })
            // 计算当前播放的进度
            var p_ratio = nowPlayTime / audio.duration;
            // 修改播放进度条的宽度
            $c_bar.width(bar_width*p_ratio)
            if(audio.ended){
                clearInterval(this.state.playTimer);
            }
            this.setState({
                lyric:this.$lyric()
            })
        },50)
    }
    // 控制音乐的播放暂停
    controlMusic(){
        var audio = this.$('#playTag')[0];
        console.log(this.state.songInfo.id)
        if(this.state.songInfo.id==0){
            return;
        }
        if(this.state.playState){
            console.log('暂停')
            audio.pause();
            clearInterval(this.state.playTimer);
            this.setState({
                playState:false
            })
        }else{
            audio.play();
            this.getMusicPlayInfo();
            this.setState({
                playState:true
            })
        }
    }
    render(){
        return <div id='mini_play'>
            <img src={this.state.songInfo.al.picUrl}/>
            <div className='pv_right'>
                <div className='pvr_c'>
                    <div className='pvr_cl'>
                        <p>{this.state.songInfo.name}</p>
                    </div>
                    <div className='pvr_cr'>
                        {/* 播放按钮 */}
                        <button onClick={this.controlMusic.bind(this)}>{this.state.playState?'暂停':'播放'}</button>
                    </div>
                </div>
                <p>{this.state.lyric}</p>
                <div className='p_time'>
                    <div className='p_bar'><div className='c_bar'></div></div>
                    <span className='timeNum'>{this.state.nowPlayTime}</span>
                </div>
                
            </div>
        </div>
    }
    componentDidMount(){
        // 监听播放歌曲信息
        this.$store.subscribe(()=>{
            this.setState({
                songInfo:this.$store.getState().playSongInfo,
                playState:true
            })
            this.getMusicPlayInfo();
        })
        if(this.state.songInfo.id){
            this.getMusicPlayInfo();
        }
        // 音频标签
        var audio = this.$('#playTag')[0];
        // 获取进度栏和进度条
        var $p_bar = this.$('.p_bar');
        // 进度栏的宽度
        var p_width = $p_bar.width();
        var $c_bar = this.$('.c_bar');
        // 获取播放状态
        this.setState({
            playState:!audio.paused
        })
        // 给进度栏设置点击事件
        $p_bar.click((e)=>{
            // 根据点击的位置设置进度条的宽度
            $c_bar.width(e.offsetX);
            // 判断当前是否有歌曲在播放
            if(this.state.songInfo.id){
                // 更改播放进度
                audio.currentTime = audio.duration * e.offsetX/ p_width;
            }
        });
    }
    componentWillUnmount(){
        // 清除定时器
        clearInterval(this.state.playTimer);
    }
}

export default MiniPlayView;